<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<style>
div {
    background-color: white;
}

div#shadow-host:focus {
    background-color: green;
}
</style>
<body>
<div id="sandbox"></div>
</body>
<script>
function testWithoutDelegatesFocus()
{
    debug(':focus and shadow host without delegatesFocus for crbug/479050');

    // Setting up the DOM tree
    var sandbox = document.querySelector('#sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {},
            createDOM('input', {'id': 'outer-input1'}),
            createDOM('div', {'id': 'shadow-host'},
                createDOM('input', {'id': 'lightdom-input'}),
                createShadowRoot(
                    createDOM('content'),
                    createDOM('input', {'id': 'inner-input'}))),
            createDOM('input', {'id': 'outer-input2'})));

    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

    var host = getNodeInComposedTree('shadow-host');
    var innerInput = getNodeInComposedTree('shadow-host/inner-input');
    var lightdomInput = getNodeInComposedTree('lightdom-input');
    var outerInput1 = getNodeInComposedTree('outer-input1');
    var outerInput2 = getNodeInComposedTree('outer-input2');

    debug('Test shadow host without tabindex');
    outerInput1.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    outerInput2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    host.focus();  // host will not get focus as it is not focusable.
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

    debug('Test shadow host with tabindex=-1');
    host.tabIndex = -1;
    outerInput1.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    outerInput2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

    debug('Test shadow host without tabindex=0');
    host.tabIndex = 0;
    outerInput1.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    outerInput2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    innerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    lightdomInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
}

testWithoutDelegatesFocus();
</script>
